<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <include file="public@head" />
</head>
<body>
<include file="public@nav" />

<div class="center advanceWrapper clearfix">
    <div class="fl leftBox">
        <ul class="timeLine fl">
            <!--<li>
                <span class="month">03-15</span>
                <i></i>
                <span class="week">星期二</span>
            </li>-->
        </ul>
        <!--<div class="lineBg fl">timeline.png</div>-->
        <ul class="fl advanceList">
            <!--<li>
                <span class="fl time">13:30</span>
                <img class="fl starImg" src="" alt="头像">
                <div class="fl txtInfo">
                    <h4 class="">韩雪</h4>
                    <span class="fl">3000人已订阅</span>
                    <span class="fl"><img src="" alt="">红包</span>
                    <span class="fl"><img src="" alt="">礼品</span>
                </div>
                <span class="fr viewPlace">订阅</span>
            </li>-->
        </ul>
        <div class="clearfix"></div>
        <div class="layui-flow-more"><a href="javascript:;"><i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon"></i></a></div>
        <p class="advance_more"></p>
    </div>
    <div class="fr rightBox">
        <div class="liveTitle clearfix">
            <h4 class="fl">正在直播</h4>
            <b class="page_len"><i class="live-page-now"></i>/<i class="live-page-total"></i></b>
            <b class="page_next disabled fr"></b>
            <b class="page_prev disabled fr"></b>
        </div>
        <ul class="livingWrapper" style="min-height: 260px;">
            <div class="layui-flow-more"><a href="javascript:;"><i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon"></i></a></div>
            <!--<li>
                <img class="fl" src="../__TMPL__public/assets/img/user_img.png" alt=""/>
                <div class="fl">
                    <h4 class="star_name">高圆圆</h4>
                    <p class="live_time">已开播1小时20分</p>
                </div>
                <span class="fr live_but">直播中</span>
            </li>-->
        </ul>
        <div class="live_all_but">全部直播<span></span></div>
        <div class="playTitle clearfix">
            <h4 class="fl">精彩回放</h4>
            <b class="page_len"><i class="back-page-now"></i>/<i class="back-page-total"></i></b>
            <b class="page_next fr"></b>
            <b class="page_prev fr"></b>
        </div>
        <ul class="playWrapper clearfix" style="min-height: 194px;">
            <div class="layui-flow-more"><a href="javascript:;"><i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon"></i></a></div>
            <!--<li>
                <a href="#">
                    <img src="../__TMPL__public/assets/img/star.jpg" alt="">
                    <i></i>
                </a>
                <b>刘诗诗</b>
            </li>-->
        </ul>
        <div class="play_all_but">全部回放<span></span></div>

        <div class="down_load_code">
            <p>下载livestar手机app</p>
            <div>
                <img class="fl" src="__TMPL__public/assets/img/code2.jpg" alt="">
                <span class="fr" style="margin-bottom: 4px;">Ios</span>
                <span class="fr">Android</span>
            </div>
        </div>
    </div>
</div>
<include file="public@footer" />
<include file="public@scripts" />
<!--<script type="text/javascript" src="__TMPL__public/assets/js/main.js"></script>-->

<script>
    headerMove(1);

    $(function(){
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.ready(function(){
                var layer_pay_index;
                //付费观看直播
                var viewLive = function(that){
                    var live_url = $(that).data("live_url"),
                            l_channel = $(that).data("l_channel"),
                            s_price = $(that).data("s_price")*100/100;

                    var pay_info_html =
                            '<div class="pay_info_wra">'+
                            '<span class="close_btn fr"></span>'+
                            '<h4 class="LB_num">'+s_price+'</h4>'+
                            '<p class="LB_tip">观看直播将消耗你'+s_price+'L币</p>'+
                            '<p class="balance_acc">账户余额：'+localStorage.u_balance+'L币</p>'+
                            '<a class="view_btn" href="javascript:void(0)">确认观看</a>'+
                            '</div>';
                    //<!--<p class="balance_acc_no">余额不足</p>-->
                    //<!--<a class="view_btn" href="##">L币充值</a>-->
                    //layer.ready(function(){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer_pay_index = layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            shadeClose: false, //开启遮罩关闭
                            area: ['434px', '324px'],
                            skin: 'layui-layer-molv',
                            content: pay_info_html,
                            resize: true,
                            //fixed:true,
                            //scrollbar:false,
                            offset: '150px',
                            id: "212"
                        });
                        if(s_price>localStorage.u_balance){
                            $(".view_btn").html("去充值");
                            window.location.href = "../recharge/index.html"
                        }else {
                            $(".view_btn").html("确认观看");
                            $(".view_btn").on("click",function(){
                                //  支付观看直播
                                var live_param = {
                                    url:'Homes/payment',
                                    data:{
                                        channel: l_channel,
                                        price: s_price
                                    }
                                };
                                //解决拦截弹出式窗口  将window.open()放在click事件中
                                var newWin = window.open();
                                $.JsonRpc(live_param,function(data){
                                    layer.close(layer_pay_index);
                                    if(data.code==200){
                                        localStorage.u_balance = data.data.u_balance;
                                        newWin.location = live_url;
                                    }else if(data.code==400){
//                                        alert(data.data.message);
                                        layer.msg(data.data.message,{offset:'150px',time: 2*1000,shadeClose: false});
                                    }
                                });
                            });
                        }
                        $(".close_btn").on("click",function(){
                            layer.close(layer_pay_index);
                        });
                    });
                };

                var living_box = $(".livingWrapper"),
                    back_box = $(".playWrapper"),
                    advance_more = $(".advance_more"),
                    load_mark = $(".layui-flow-more"),
                    left_box = $(".leftBox"),
                    time_line_wrap = $(".advanceWrapper .timeLine"),
                    time_list_wrap = $(".advanceWrapper .advanceList"),
                    live_page_next = $(".liveTitle .page_next"),
                    live_page_prev = $(".liveTitle .page_prev"),
                    back_page_next = $(".playTitle .page_next"),
                    back_page_prev = $(".playTitle .page_prev"),
                    live_page_now_wrap = $(".live-page-now"),
                    live_page_total_wrap = $(".live-page-total"),
                    back_page_now_wrap = $(".back-page-now"),
                    back_page_total_wrap = $(".back-page-total"),
                    live_null_html = '<div class="null-tips"><a href="javascript:;"><i>当前没有明星直播！</i></a></div>',
                    advance_null_html = '<div class="null-tips"><a href="javascript:;"><i>当前没有明星预播！</i></a></div>',
                    back_null_html = '<div class="null-tips"><a href="javascript:;"><i>当前没有回放！</i></a></div>';

                living_box.on("click","li",function(){
                    viewLive($(this));
                });

                var arr_advance_init = [
                    {
                        btn_more:advance_more,
                        page_now:1,
                        amount:10,
                        interface_now:"Homes/advanceList"
                    },
                    {
                        btn_prev:live_page_prev,
                        btn_next:live_page_next,
                        page_now_wrap:live_page_now_wrap,
                        page_total_wrap:live_page_total_wrap,
                        page_now:1,
                        page_total:"",
                        amount:6,
                        interface_now:"Homes/liveList",
                        pushData:pushLiveData,
                        data_arr:[]
                    },
                    {
                        btn_prev:back_page_prev,
                        btn_next:back_page_next,
                        page_now_wrap:back_page_now_wrap,
                        page_total_wrap:back_page_total_wrap,
                        page_now:1,
                        page_total:"",
                        amount:6,
                        interface_now:"Homes/playBackList",
                        pushData:pushBackData,
                        data_arr:[]
                    }
                ];

                var live_data_arr = [],play_data_arr = [];

                function pushAdvanceData (advance_list){
                    var timeHtml = "",
                        advanceHtml = "";
                    $.each(advance_list,function(i){
                        var dateArray = advance_list[i].l_date.split("-");
                        var liveDate = dateArray[1]+"-"+dateArray[2];
                        var day = new Date(Date.parse(advance_list[i].l_date.replace(/-/g, '/')));
                        var today = new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
                        var week = today[day.getDay()];
                        var booked,bookClass;
                        //booked,20没有预定,10已预定
                        (advance_list[i].booked==10)?(booked="已订阅",bookClass="viewPlace viewPlace_add"):(booked="订阅",bookClass="viewPlace");
                        var l_package="";
                        var l_gift = "";
                        (advance_list[i].l_package==10)?l_package = '<span class="l_package fl"><i></i>红包</span>':l_package="";
                        (advance_list[i].l_gift==10)?l_gift = '<span class="l_gift fl"><i></i>礼品</span>':l_gift="";
                        timeHtml +=
                                '<li>'+
                                '<span class="month">'+liveDate+'</span>'+
                                '<i></i>'+
                                '<span class="week">'+week+'</span>'+
                                '</li>';

                        var start_time = String(advance_list[i].l_startime).split(":");
                        advanceHtml +=
                                '<li>'+
                                '<span class="fl time">'+start_time[0]+":"+start_time[1]+'</span>'+
                                '<img class="fl starImg" src="'+advance_list[i].s_image+'" alt="头像">'+
                                '<div class="fl txtInfo">'+
                                '<h4 class="">'+advance_list[i].s_name+'</h4>'+
                                '<span class="fl booked_num">'+advance_list[i].l_booked+'人已订阅</span>'+
                                l_package+l_gift+
                                '</div>'+
                                '<span class="fr '+bookClass+'" data-l_id="'+advance_list[i].l_id+'" data-status="'+advance_list[i].booked+'">'+booked+'</span>'+
                                '</li>';

                    });

                    $(timeHtml).appendTo(time_line_wrap);
                    $(advanceHtml).appendTo(time_list_wrap);
                   /* if(advanceNum<=param.advance||advanceNum<=$(".advanceList li").length){
                        advance_more.html("更多预告敬请期待");
                        advance_more.off("click");
                    }else {
                        advance_more.html("加载更多");
                    }*/
                }

                function pushLiveData(page_num){
                    var page_total = arr_advance_init[1].page_total;
                    arr_advance_init[1].page_now_wrap.html(page_num);
                    if(arr_advance_init[1].page_total==1){
                        live_page_next.addClass("disabled");
                        live_page_prev.addClass("disabled");
                    }else {
                        if(page_num<page_total&&page_num>1){
                            live_page_next.removeClass("disabled");
                            live_page_prev.removeClass("disabled");
                        }else if(page_num==1){
                            live_page_prev.addClass("disabled");
                            live_page_next.removeClass("disabled");
                        }else if(page_num==page_total){
                            live_page_next.addClass("disabled");
                            live_page_prev.removeClass("disabled");
                        }
                    }
                    var liveData = arr_advance_init[1].data_arr[page_num-1];
                    var tpl_live = "";
                    $.each(liveData,function(i){
                        var l_createtime = String(liveData[i].l_createtime).split(":");
                        tpl_live +=
                                '<li data-l_channel = "'+liveData[i].l_channel+'" data-s_price="'+liveData[i].s_price+'" data-live_url="../Live/living?roomid='+liveData[i].l_channel+'&suid='+liveData[i].l_udid+'">'+
                                '<a class="clearfix" href="javascript:void(0)">'+
                                '<img class="fl" src="'+liveData[i].u_avatar+'" alt="">'+
                                '<div class="fl">'+
                                '<h4 class="star_name">'+liveData[i].s_name+'</h4>'+
                                '<p class="live_time">已开播'+l_createtime[0]+'小时'+l_createtime[1]+'分</p>'+
                                '</div>'+
                                '<span class="fr live_but">直播中</span>'+
                                '</a>'+
                                '</li>';
                    });
                    living_box.html(tpl_live);
                }

                function pushBackData(page_num){
                    var page_total = arr_advance_init[2].page_total;
                    arr_advance_init[2].page_now_wrap.html(page_num);
                    if(arr_advance_init[2].page_total==1){
                        back_page_next.addClass("disabled");
                        back_page_prev.addClass("disabled");
                    }else {
                        if(page_num<page_total&&page_num>1){
                            back_page_next.removeClass("disabled");
                            back_page_prev.removeClass("disabled");
                        }else if(page_num==1){
                            back_page_prev.addClass("disabled");
                            back_page_next.removeClass("disabled");
                        }else if(page_num==page_total){
                            back_page_next.addClass("disabled");
                            back_page_prev.removeClass("disabled");
                        }
                    }
                    var playData = arr_advance_init[2].data_arr[page_num-1];;
                    var tpl = "";
                    $.each(playData,function(i){
                        var img_src = playData[i].s_image||playData[i].l_image;
                        var tripleBox ="";
                        ((i+1)%3 == 0)?tripleBox="tripleBox":tripleBox="";
                        tpl +=
                                '<li class="'+tripleBox+'">'+
                                '<a href="../playback/index?roomid='+playData[i].l_channel+'&suid='+playData[i].l_udid+'">'+
                                '<img src="'+img_src+'" alt="">'+
                                '<i></i>'+
                                '</a>'+
                                '<b>'+playData[i].s_name+'</b>'+
                                '</li>';
                    });
                    back_box.html(tpl);
                }

                //第一页所有数据
                var getHomeData = function(){
                    var param = {
                        url:'Homes/homeList',
                        data:{
                            page:'1',
                            live:'6',
                            advance:'10',
                            play:'6',
                            shout:'0'
                        }
                    };

                    $.JsonRpc(param,function(data) {
                        var live_data = data.data.live,
                                shout_data = data.data.shout,
                                playback_data = data.data.play,
                                advance_data = data.data.advance;

                        if(!advance_data.num){
                            advance_more.html("更多预告敬请期待").addClass("disabled");
                            left_box.html(advance_null_html);
                        }else {
                            var tpl_call = "";
                            var advance_num= advance_data.num;
                            var advance_list = advance_data.list;
                            var advanceNowPage = shout_data.page;
                            if(Math.ceil(advance_num/advance_list.length)==advanceNowPage){
                                advance_more.html("更多预告敬请期待").addClass("disabled");
                            }else {
                                advance_more.html("加载更多");
                            }
                            pushAdvanceData(advance_list);
                            iService.bookHover();
                            $(".viewPlace").off("click").on("click",function(){
                                iService.book_Fun($(this));
                            });
                            load_mark.eq(0).hide();
                        }
                        if(!live_data.num){
                            live_page_next.addClass("disabled");
                            live_page_prev.addClass("disabled");
                            living_box.html(live_null_html);
                            live_page_now_wrap.html("0");
                            live_page_total_wrap.html("0");
                        }else {
                            var live_list = live_data.list;
                            arr_advance_init[1].data_arr.push(live_list);
                            arr_advance_init[1].page_total = Math.ceil(live_data.num/arr_advance_init[1].amount);
                            pushLiveData(1);
                            arr_advance_init[1].page_now_wrap.html(arr_advance_init[1].page_now);
                            arr_advance_init[1].page_total_wrap.html(arr_advance_init[1].page_total);
                            load_mark.eq(1).hide();
                        }
                        if(!playback_data.num){
                            back_page_next.addClass("disabled");
                            back_page_prev.addClass("disabled");
                            back_box.html(back_null_html);
                            back_page_now_wrap.html("0");
                            back_page_total_wrap.html("0");
                        }else {
                            var playback_list = playback_data.list;
                            arr_advance_init[2].data_arr.push(playback_list);
                            arr_advance_init[2].page_total = Math.ceil(playback_data.num/arr_advance_init[2].amount);
                            pushBackData(1);
                            arr_advance_init[2].page_now_wrap.html(arr_advance_init[2].page_now);
                            arr_advance_init[2].page_total_wrap.html(arr_advance_init[2].page_total);
                            load_mark.eq(2).hide();
                        }
                    });
                };
                getHomeData();

                //分项数据
                function getListData(list_now,index){
                    var param = {
                        url:list_now.interface_now,
                        data:{
                            page:list_now.page_now,
                            amount:list_now.amount
                        }
                    };
                    load_mark.eq(index).show();
                    if(index==1){
                        living_box.html('<div class="layui-flow-more"><a href="javascript:;"><i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon"></i></a></div>');
                    }else if(index==2){
                        back_box.html('<div class="layui-flow-more"><a href="javascript:;"><i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon"></i></a></div>');
                    }
                    $.JsonRpc(param,function(data) {
                        //list_now.pushData(data.data);
                        var amount = data.content.amount;
                        data = data.data;
                        var list_num= data.num;
                        var list_data = data.list;
                        var nowPage = data.page;
                        var totalPage = Math.ceil(list_num/amount);
                        if(index==0){
                            if(Math.ceil(list_num/amount)==nowPage){
                                advance_more.html("更多预告敬请期待").addClass("disabled");
                            }else {
                                advance_more.html("加载更多");
                            }
                            pushAdvanceData(list_data);
                            load_mark.eq(index).hide();
                        }else if(index==1){
                            arr_advance_init[1].data_arr.push(list_data);
                            pushLiveData(nowPage);
                            load_mark.eq(index).hide();
                        }else if(index==2){
                            arr_advance_init[2].data_arr.push(list_data);
                            pushBackData(nowPage);
                            load_mark.eq(index).hide();
                        }

                    });
                }
                advance_more.on("click",function(){
                    if(!$(this).hasClass("disabled")){
                        arr_advance_init[0].page_now += 1;
                        var page_now = arr_advance_init[0].page_now;
                        getListData(arr_advance_init[0],0);
                    }else {
                        return false;
                    }
                });

                $.each(arr_advance_init,function(i){
                    if(i){
                        arr_advance_init[i].btn_next.on("click",function(){
                            if(!$(this).hasClass("disabled")){
                                arr_advance_init[i].page_now +=1;
                                if(arr_advance_init[i].page_now==arr_advance_init[i].page_total){
                                    $(this).addClass("disabled");
                                }
                                var page_now = arr_advance_init[i].page_now;
                                if(arr_advance_init[i].data_arr[page_now-1]){
                                    arr_advance_init[i].pushData(page_now);
                                }else {
                                    getListData(arr_advance_init[i],i);
                                }
                            }else {
                                return false;
                            }
                        });
                        arr_advance_init[i].btn_prev.on("click",function(){
                            if(!$(this).hasClass("disabled")){
                                arr_advance_init[i].page_now -=1;
                                var page_now = arr_advance_init[i].page_now;
                                arr_advance_init[i].pushData(page_now);
                            }else {
                                return false;
                            }
                        });

                    }
                });
            });
        });
    });
</script>
</body>
</html>














